<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>客户管理 会员购物车</title>
<link href="${rc.contextPath}/assets/css/bootstrap.min.css"
	rel="stylesheet" />

<link rel="stylesheet"
	href="${rc.contextPath}/assets/css/font-awesome.min.css" />
<link rel="stylesheet"
	href="${rc.contextPath}/assets/css/datepicker.css" />
<link rel="stylesheet"
	href="${rc.contextPath}/assets/css/daterangepicker.css" />
<link rel="stylesheet" href="${rc.contextPath}/assets/css/ui.jqgrid.css" />

<link rel="stylesheet"
	href="${rc.contextPath}/assets/css/jquery-ui-1.10.3.full.min.css" />
<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" />
<!-- ace settings handler -->
<script src='${rc.contextPath}/assets/js/jquery-2.0.3.min.js'></script>
<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>
<!-- page specific plugin scripts -->

<script src="${rc.contextPath}/assets/js/jquery-ui-1.10.3.full.min.js"></script>
<script src="${rc.contextPath}/assets/js/jqGrid/jquery.jqGrid.min.js"></script>
<script src="${rc.contextPath}/assets/js/jqGrid/i18n/grid.locale-en.js"></script>
<!-- ace scripts -->
<script
	src="${rc.contextPath}/assets/js/date-time/bootstrap-datepicker.min.js"></script>
<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
<script src="${rc.contextPath}/common/js/common.js"></script>
<!-- <script src="${rc.contextPath}/common/js/thickbox/thickbox.js"></script>
<script src="${rc.contextPath}/common/js/config.js"></script> --><!-- 
<script
	src="${rc.contextPath}/common/js/market/customer/customer_details.js"></script> -->

<script src="${rc.contextPath}/common/js/market/service/customer_deal_detail.js"></script>
<script src="${rc.contextPath}/assets/js/jquery.slimscroll.min.js"></script>
<script src="${rc.contextPath}/assets/js/jquery.easy-pie-chart.min.js"></script>
<script src="${rc.contextPath}/assets/js/jquery.sparkline.min.js"></script>
<script src="${rc.contextPath}/assets/js/flot/jquery.flot.min.js"></script>
<script src="${rc.contextPath}/assets/js/flot/jquery.flot.pie.min.js"></script>
<script src="${rc.contextPath}/assets/js/flot/jquery.flot.resize.min.js"></script>
<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
<script src="${rc.contextPath}/assets/js/bootbox.min.js"></script>
<script
	src="${rc.contextPath}/assets/js/date-time/daterangepicker.min.js"></script>
<script src="${rc.contextPath}/assets/js/jquery.validate.min.js"></script>
<script src="${rc.contextPath}/assets/js/date-time/moment.min.js"></script>
<link href="${rc.contextPath}/common/css/common/commonnew.css"rel="stylesheet" type="text/css" />
<script>
var deptJson = $deptJson;
</script>

<body>
	<div class="main-container">
		<div class="page-content">

			<div class="page-header">
				当前位置 <i class="icon-double-angle-right"></i> 客户管理  <i
					class="icon-double-angle-right"></i> 我的客户
				
				<p style="float: right">姓名： $!{currentUser.ename}</p>
			</div>

			<form class="form-horizontal" id="validation-form" method="post"
				action="${rc.contextPath}/cart/showShopCart">
				<div class="form-group">
					<label class="control-label col-sm-1 " for="agentCode">会员号:</label>
					<div class="col-sm-2">
						<div class="clearfix">
							<input type="text" name="customId" id="customId" 
								class="form-control input-sm" value="$!{customerContact.uname}" />
						</div>
					</div>
					
					<label class="control-label col-sm-2 " for="agentCode">手机号:</label>
					<div class="col-sm-2">
						<div class="clearfix">
							<input type="text" name="agentCode" id="agentCode"
								class="form-control input-sm" value="$!{customerContact.uname}" />
						</div>
					</div>
					<label class="control-label col-sm-2 " for="agentCode">绑定邮箱:</label>
					<div class="col-sm-2">
						<div class="clearfix">
							<input type="text" name="agentCode" id="agentCode"
								class="form-control input-sm" value="$!{customerContact.uname}" />
						</div>
					</div>
				</div>
				<div class="form-group">
					
					<label class="control-label col-sm-1 " for="agentCode">客户名称:</label>
					<div class="col-sm-2">
						<div class="clearfix">
							<input type="text" name="agentCode" id="agentCode"
								class="form-control input-sm" value="$!{customerContact.uname}" />
						</div>
					</div>
					<label class="control-label col-sm-2 " for="agentCode">座机:</label>
					<div class="col-sm-2">
						<div class="clearfix">
							<input type="text" name="agentCode" id="agentCode"
								class="form-control input-sm" value="$!{customerContact.uname}" />
						</div>
					</div>
					<label class="control-label col-sm-2 " for="agentCode">联系人:</label>
					<div class="col-sm-2">
						<div class="clearfix">
							<input type="text" name="agentCode" id="agentCode"
								class="form-control input-sm" value="$!{customerContact.uname}" />
						</div>
					</div>
				</div>
				
				<div class="col-sm-offset-4">
					<button type="button" class="btn btn-primary" id="queryButton">查询</button>
					&nbsp;&nbsp;
					<button type="reset" class="btn">重置</button>
				</div>
			</form>
			<div id="dialog" class="hide"></div>
			<hr />
			<table id="grid-table"></table>

			<div id="grid-pager"></div>
		</div>
	</div>
	
	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	    <div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h2 class="modal-title" id="myModalLabel">调配申请</h2>
	            </div>
	            
	            <form id="allotFrom"  class="form-horizontal" method="post"	action="${rc.contextPath}/allot/dealPersonChange">
	              <div class="control-group">
				    <label class="control-label">当前分公司：</label>
				    <label class="control-label" id="companyNow"></label>
				  </div>
				  <div class="control-group">
				    
				    <div class="controls">
				    	<label class="control-label" for="inputEmail">接收人：</label>
				        <select id="receivedCompany" name="receivedCompany" onchange="setReceivedPersonShow(this.value);setReceivedPerson(this.value);" class="selectpicker">
                     	 <option value="--">请选择</option>
                		</select>
                		<select id="receivedPerson" name="receivedPerson" class="selectpicker" >
                     	 <option value="--">请选择</option>
                		</select>
				    </div>
				  </div>
				  <div class="control-group">
				    <label class="control-label" for="inputPassword">调配原因：</label>
				    
				    <textarea id="mixCause" name="mixCause" rows="3" class="form-control" > </textarea>
				  </div>
				  <div class="modal-footer">
				      <button type="button" class="btn" onclick="checkApplyParam()">确定</button>
				      <button type="button" class="btn btn-default" data-dismiss="modal" onclick="clearSelect()">取消</button>
				  </div>
				  	  <input type="hidden" id="selectedCusId" name="selectedCusId"/>
				  	  <input type="hidden" id="compamyid" name="compamyid"/>
				</form>
	        </div><!-- /.modal-content -->
	    </div><!-- /.modal -->
	</div>	
	
	
	
	<script type="text/javascript">
		try{ace.settings.check('sidebar' , 'collapsed')}catch(e){}
	</script>
	<script type="text/javascript">
	
		var grid_selector = "#grid-table";
		var pager_selector = "#grid-pager";
		var column = '["会员号","客户名称","最近沟通记录","注册时间","所属区域","客户类型"]';
		var columnCode = '[{"name":"customId","index" : "custom_id"}, {"name":"organizeNameCN","sortable":false}, {"name":"remark","sortable":false}, {"name":"addTime","index" : "add_time"}, {"name":"areaName","sortable":false},{"name":"customerTypeStr","sortable":false} ]';
		var url = "${rc.contextPath}/customerManage/queryCustomerNew";
		column = jQuery.parseJSON(column);
		columnCode = jQuery.parseJSON(columnCode);
		postData = jQuery.parseJSON('{"customId":"--"}');
		$("#queryButton").click(function() {
			var customId=$("#customId").val();
			var operateTime=$("#id-date-range-picker-1").val();
            $(grid_selector).jqGrid('setGridParam',{
            	postData:{"customId":customId},
            	page:1,
            	rows:10
        	}).trigger('reloadGrid'); 
		});
		
		//switch element when editing inline
		function aceSwitch( cellvalue, options, cell ) {
			setTimeout(function(){
				$(cell) .find('input[type=checkbox]')
						.wrap('<label class="inline" />')
					.addClass('ace ace-switch ace-switch-5')
					.after('<span class="lbl"></span>');
			}, 0);
		}
		//enable datepicker
		function pickDate( cellvalue, options, cell ) {
			setTimeout(function(){
				$(cell) .find('input[type=text]')
						.datepicker({format:'yyyy-mm-dd' , autoclose:true}); 
			}, 0);
		}
		function style_edit_form(form) {
			//enable datepicker on "sdate" field and switches for "stock" field
			form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})
				.end().find('input[name=stock]')
					  .addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');
	
			//update buttons classes
			var buttons = form.next().find('.EditButton .fm-button');
			buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
			buttons.eq(0).addClass('btn-primary').prepend('<i class="icon-ok"></i>');
			buttons.eq(1).prepend('<i class="icon-remove"></i>')
			
			buttons = form.next().find('.navButton a');
			buttons.find('.ui-icon').remove();
			buttons.eq(0).append('<i class="icon-chevron-left"></i>');
			buttons.eq(1).append('<i class="icon-chevron-right"></i>');		
		}
	
		function style_delete_form(form) {
			var buttons = form.next().find('.EditButton .fm-button');
			buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
			buttons.eq(0).addClass('btn-danger').prepend('<i class="icon-trash"></i>');
			buttons.eq(1).prepend('<i class="icon-remove"></i>')
		}
		
		function style_search_filters(form) {
			form.find('.delete-rule').val('X');
			form.find('.add-rule').addClass('btn btn-xs btn-primary');
			form.find('.add-group').addClass('btn btn-xs btn-success');
			form.find('.delete-group').addClass('btn btn-xs btn-danger');
		}
		function style_search_form(form) {
			var dialog = form.closest('.ui-jqdialog');
			var buttons = dialog.find('.EditTable')
			buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'icon-retweet');
			buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'icon-comment-alt');
			buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'icon-search');
		}
		
		function beforeDeleteCallback(e) {
			var form = $(e[0]);
			if(form.data('styled')) return false;
			
			form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
			style_delete_form(form);
			
			form.data('styled', true);
		}
		
		function beforeEditCallback(e) {
			var form = $(e[0]);
			form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
			style_edit_form(form);
		}
	
	
	
		//it causes some flicker when reloading or navigating grid
		//it may be possible to have some custom formatter to do this as the grid is being created to prevent this
		//or go back to default browser checkbox styles for the grid
		function styleCheckbox(table) {
		/**
			$(table).find('input:checkbox').addClass('ace')
			.wrap('<label />')
			.after('<span class="lbl align-top" />')
	
	
			$('.ui-jqgrid-labels th[id*="_cb"]:first-child')
			.find('input.cbox[type=checkbox]').addClass('ace')
			.wrap('<label />').after('<span class="lbl align-top" />');
		*/
		}
		
	
		//unlike navButtons icons, action icons in rows seem to be hard-coded
		//you can change them like this in here if you want
		function updateActionIcons(table) {
			/**
			var replacement = 
			{
				'ui-icon-pencil' : 'icon-pencil blue',
				'ui-icon-trash' : 'icon-trash red',
				'ui-icon-disk' : 'icon-ok green',
				'ui-icon-cancel' : 'icon-remove red'
			};
			$(table).find('.ui-pg-div span.ui-icon').each(function(){
				var icon = $(this);
				var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
				if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
			})
			*/
		}
		
		//replace icons with FontAwesome icons like above
		function updatePagerIcons(table) {
			var replacement = 
			{
				'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',
				'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
				'ui-icon-seek-next' : 'icon-angle-right bigger-140',
				'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'
			};
			$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
				var icon = $(this);
				var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
				
				if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
			})
		}
	
		function enableTooltips(table) {
			$('.navtable .ui-pg-button').tooltip({container:'body'});
			$(table).find('.ui-pg-div').tooltip({container:'body'});
		}
		
		function makegrid(postData){
			jQuery(grid_selector).jqGrid({
				url : url,
				postData,
				mtype : "POST",
				contentType : "application/json",
				datatype : "json",
				autowidth:true,
				colNames:column,
				colModel:columnCode,
				
				viewrecords : true,
				rowNum:10,
				rowList:[10,30,50],
				pager : pager_selector,
				emptyrecords: "没有查到相关数据！", 
				pgtext : "第{0}页，总共{1}页", 
				recordtext : "查看 {0} - {1}条记录， 总记录数 {2}",
				loadtext:"加载中，请稍候...",
				altRows: true,
				multiselect : true,
				sortorder: "desc",
				sortname: 'add_time',
				jsonReader : {
				      root:"records",
				      page: "pageNow", //当前页
				      total: "pageCount", //总页数
				      records: "rowCount"//总记录数
				},
				 loadComplete : function() {
					var table = this;
					
					var re_records = $(grid_selector).getGridParam('records');
					if(re_records == 0 || re_records == null){
						$(grid_selector).setGridHeight(0);
					} if(re_records < 10){
						$(grid_selector).setGridHeight(re_records*35);
					} 
					else {
						$(grid_selector).setGridHeight(350);
					}
					$("#id").setGridWidth($(window).width()*0.98);　
					setTimeout(function(){
						updatePagerIcons(table);
					}, 0);
				},
				
			});
			
			//调配
			$(grid_selector)
			.navGrid(pager_selector,{edit:false,add:false,del:false,search:false})
			.navButtonAdd(
					pager_selector,
					{caption:"调配",
					 title:"调配",
					 onClickButton: function(){
						 	 var selectedIds = $(grid_selector).jqGrid("getGridParam", "selarrrow");
						 	 var rowData = [];
						 	 var company;
						 	 //检查是否有数据被选中
						 	 if(!selectedIds.toString()){
						 		 alert("请选择至少一条数据");
						 	 }
						 	 //获取选中会员编号
						 	 selectedIds.forEach(function(id){  
						 		var tempRow = $(grid_selector).jqGrid('getRowData',id);
						 		rowData.push(tempRow.customId);
						 		//获取一条选中数据用来显示当前分公司
						 		company = tempRow;
							 }) 
						 	 //
							 selectedCusId = rowData; 
						 	 
						 	 //显示当前分公司
						 	 setCompany(company);
						 	 //设置部门下拉框
							 findDept();
							 //模态框弹出方法
							 $("#myModal").modal({backdrop:'static'});
							 
						 }, 
					position:"left"})
			//全部调配按钮
			.navButtonAdd(
					pager_selector,
					{id:"allotAll",
					 caption:"全部调配",
					 title:"全部调配",
					 buttonicon:"ui-icon-add",
					 onClickButton: function(){
						 //校验提交调配客户数量
						 checkAllotNumber($("#validation-form").serializeObject());
						 //0成功，1数量超过2000，2所选内容不是同一分公司
						 var status = $("#allotNum").val();
						 if(status==1){
							 alert("操作客户数量过多，请修改查询条件后重试！");
						 }
						 if(status==2){
							 alert("只能调配同一家分公司客户，请选择符合条件的客户！");
						 }
						 if(status==0){
							//显示当前分公司
						 	 setCompany();
						 	//设置部门下拉框
							 findDept();
							//模态框弹出方法
							 $("#myModal").modal({backdrop:'static'});
						 }
						 }, 
					position:"left"});
		}
		
		makegrid(postData);
	</script>
</body>
</html>
